<template>
  <div>
    <Card dis-hover>
      <div class="search-con search-con-top">
        <Input
          clearable
          placeholder="输入拼团标题检索"
          @on-enter="handleSearch"
          class="search-input"
          v-model="searchValue"
        />
        <Button @click.stop="handleSearch" class="search-btn" icon="ios-search" type="primary">搜索</Button>
      </div>
    </Card>
    <div class="list-content">
      <CellGroup>
        <Cell :key="index" class="item" v-for="(item,index) in list">
          <img :src="item.banner_url">
          <div class="detail">
            <div>{{item.goods_name}}</div>
            <div>{{item.activity_price}}</div>
          </div>
          <div class="stocks">{{item.title}}</div>
          <div class="btn">
            <Button @click.stop="handleSelect(item)">选取</Button>
          </div>
        </Cell>
      </CellGroup>
    </div>

    <div style="margin-top: 10px;height: 37px;">
      <Page
        ref="tablepage"
        style="float: right"
        :total="total"
        show-total
        show-sizer
        show-elevator
        :current.sync="tablePage"
        :page-size="perPage"
        :page-size-opts="pageSizeOpts"
        @on-change="handlePageChange"
        @on-page-size-change="handlePageSizeChange"
      />
    </div>
  </div>
</template>

<script>
import { getTableData } from "@/api/form";

export default {
  name: "PurchaseSelect",
  data() {
    return {
      list: [],
      searchValue: "",
      total: 0, // 数据总数
      tablePage: 1, // 当前页码
      perPage: 5, // 每页条数
      pageSizeOpts: [5, 10, 20, 30], // 每页条数切换的配置
      sort: []
    };
  },
  methods: {
    handleSelect(item) {
      this.$emit("on-select-item", { type: 1, data: item });
    },
    // 搜索事件
    handleSearch(value) {
      this.getData();
    },
    handlePageSizeChange(pageSize) {
      this.perPage = pageSize;
      this.getData();
    },
    handlePageChange(page) {
      this.tablePage = page;
      this.getData();
    },
    getData() {
      const filters = {
        form_id: 14,
        page_info: {
          page: this.tablePage,
          per_page: this.perPage
        },
        sort: this.sort,
        conditions: []
      };

      if (this.searchValue) {
        filters.conditions = [
          {
            field_name: "title",
            type: 3,
            value: this.searchValue,
            field_type: "text"
          }
        ];
      }

      filters.conditions = filters.conditions.concat([
        {
          field_name: "stime",
          type: 8,
          value: Math.floor(Date.parse(new Date()) / 1000),
          field_type: "datetime"
        },
        {
          field_name: "etime",
          type: 6,
          value: Math.floor(Date.parse(new Date()) / 1000),
          field_type: "datetime"
        }
      ]);
      // 获取表格数据
      getTableData(filters).then(res => {
        this.list = res.data.data.list;
        this.total = res.data.data.total_count;
        // this.loadingShow = false;
      });
    }
  },
  created() {
    this.getData();
  }
};
</script>
